<template>
  <div class="layout">
    <!-- 左侧 -->
    <div class="left">
      <div class="text">
        记录生活的每一步<br>
        &ensp;&ensp;分享感动的每一幕
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <LoginBook @updatePage="updatePage" v-show="page === 1" />
      <Register @updatePage="updatePage" v-show="page === 2" />
    </div>
  </div>
</template>

<script setup>
import LoginBook from './LoginBook.vue';
import { ref } from 'vue'
import Register from './Register.vue';
let page = ref(1)

const updatePage = (newPage) => {
  page.value = newPage
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  background-color: #ccc;
  width: 100vw;
  height: 100vh;

  // 左侧
  .left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;

    .text {
      font-size: 1.2rem;
      font-weight: bold;
      line-height: 2.5rem;
      color: #333;
    }
  }

  // 右侧
  .right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    opacity: 30%;
    background: url('@/assets/login_bgc.jpg') no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
  }
}
</style>